import React, { Component } from 'react'
import ProTable from '@ant-design/pro-table';
import { Button, Modal, Form, Input, Row, Col, Select, Checkbox, Table, Divider} from 'antd';
import { queryRule } from '../../service';
import styles from './style.less';
import router from 'umi/router';


const columns = [
    {
        title: '序号',
        dataIndex: 'name',
        align: 'center',
        className: styles.tableColumBg
    },
    {
        title: '产品名称及型号',
        className: 'column-money',
        dataIndex: 'money',
        align: 'center',
        width: 150
    },
    {
        title: '产品主图',
        dataIndex: 'address',
        align: 'center',
        render: record => (
            <img src={record} alt="" style={{width: '120px', height: '120px'}}/>
        ),
    },
    {
        title: '年销售额',
        dataIndex: 'product',
        align: 'center'
    },
    {
        title: '占主营业务收入比重',
        dataIndex: 'd1',
        align: 'center',
        width: 110,
    },
    {
        title: '主要面向市场',
        dataIndex: 'd2',
        align: 'center',
        width: 110
    },
    {
        title: '产品功能介绍',
        dataIndex: 'd3',
        align: 'center',
        width: '18%'
    },
    {
        title: '是否首台案',
        dataIndex: 'd4',
        align: 'center',
        width: 90
    },
    {
        title: '是否有产品专利',
        dataIndex: 'd5',
        align: 'center',
        width: 90
    },
    {
        title: '产品所属类型（参考备注）',
        dataIndex: 'd6',
        align: 'center',
        width: 170
    },
]

const data = [
    {
        key: '1',
        name: '01',
        money: '医疗康复器具器械类-HY787',
        address: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578051561606&di=f9b9c97e631d4e39912a76f3f2e2e75c&imgtype=0&src=http%3A%2F%2Fimage1.big-bit.com%2F2016%2F0707%2F20160707104559578.jpg',
        product: '1000千万',
        d1: '10%',
        d2: '医院',
        d3: '医疗器械是指直接医疗器械是指直接医疗器械是指直接医疗器械是指直接医疗器械是指直接医疗器械是指直接医疗器械是指直接医疗器械是指直接',
        d4: '是',
        d5: '是',
        d6: '医疗设备、器械类',
    },
    {
        key: '2',
        name: '02',
        money: '医疗康复器具器械类-HY787',
        address: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578051561606&di=f9b9c97e631d4e39912a76f3f2e2e75c&imgtype=0&src=http%3A%2F%2Fimage1.big-bit.com%2F2016%2F0707%2F20160707104559578.jpg',
        product: '1000千万',
        d1: '10%',
        d2: '医院',
        d3: '医疗器械是指直接医疗器械是指直接医疗器械是指直接医疗器械是指直接医疗器械是指直接医疗器械是指直接医疗器械是指直接医疗器械是指直接',
        d4: '是',
        d5: '是',
        d6: '医疗设备、器械类',
    },
];



// eslint-disable-next-line react/prefer-stateless-function
class MakeTableRecord extends Component {
    state = {
        visible: false,
        currentPage: 1,
        totalPage: 30,
        columns: [
            {
              title: '序号',
              dataIndex: 'desc',
            },
            {
              title: '制表年份',
              dataIndex: 'type',
            },
            {
                title: '企业名称',
                dataIndex: 'numble',
            },
            {
                title: '制表人员',
                dataIndex: 'numble',
            },
            {
                title: '是否已经打印',
                dataIndex: 'numble',
            },
            {
              title: '操作',
              dataIndex: 'option',
              valueType: 'option',
              align: 'center',
              render: (_, record) => (
                <>
                    <a
                    onClick={() => {
                        // eslint-disable-next-line no-console
                        console.log(record)
                    }}
                    >
                    详情
                    </a>
                    <Divider type="vertical" />
                    <a href="">打印</a>
                    <Divider type="vertical" />
                    <a href="">删除</a>
                </>
              ),
            },
        ],
    };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = () => {
        this.setState({
            visible: false,
        });
    };

    handleCancel = () => {
        this.setState({
            visible: false,
        });
    };

    

    render () {
        // 编辑弹窗
        const CheckChangeRecord = () => (
            <Modal
                title="变更详情"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width='80%'
            >
                <Table
                    columns={columns}
                    dataSource={data}
                    bordered
                    pagination={false}
                />
            </Modal>
            
        )

        return (
            <div>
                <ProTable
                    className={styles.proTable}
                    rowKey="key"
                    options={false}
                    request={params => queryRule(params)}
                    columns={this.state.columns}
                    rowSelection={{}}
                    pagination={{
                        showTotal: total => `共${total}条记录 第${this.state.currentPage}／${this.state.totalPage}页`,
                        onChange: (page, pageSize) => {
                            console.log(page)
                            console.log(pageSize)
                        },
                        onShowSizeChange: (current, size) => {
                            console.log(current, size)
                        } ,
                        defaultPageSize: 10,
                        showQuickJumper: true,
                        showSizeChanger: true
                    }}
                    search={{}}
                >
                    
                </ProTable>
                <CheckChangeRecord />
            </div>
        )
    }
}

export default MakeTableRecord